<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>

</head>

<body>
    <div class="demo">
        <p>name:{{name}}</p>
        <p>age: {{age}}</p>


        
        <p>{{1 + 1}}</p>
        <p>{{'1000' + 1}}</p>
        <p>{{arr}}</p>
        <p>对象： {{obj}}</p>
        <p>boolean: {{b1}}</p>
        <p>boolean: {{false}}</p>
        <p>undefined: {{und}}</p>
        <p>null: {{n1}}</p>


    </div>


    <script>
        /**
         *  1. 容器和vm 是一一对应的。后续开发整个项目只有一个vm
         *  2. {{js表达式}} ： 插值语法
         *     js表达式：都是有值的
         *     （1）变量常量
         *      (2) 三元表达式
         *      (3) 逻辑预算  5 && 8  3 || 2
         *      (4) 函数调用返回值  fn()
         * 
         *  3. vue模板中的表达式如果使用为了 data中的数据，那么如果data中的数据改变了，模板渲染会实时更新
         */

        new Vue({
            el: '.demo',
            data: {
                name: 'atguigu',
                age:19,
                arr:[1,2,3,4],
                obj:{
                    name:'yuonly',
                    age:10
                },
                b1:true,
                und:undefined,
                n1:null
            }
        })

        // new Vue({
        //     el: '.demo',
        //     data: {
        //         age: 18
        //     }
        // })
    </script>
</body>

</html>